<!DOCTYPE HTML>
<html>
<head>
    <title>背景</title>
    <link rel="stylesheet" type="text/css" href="../CSS/CSS.css">
    <style type="text/css">
        * {

            background-image: url("../img/beijin4.jpg");
            padding: 0;
            margin-top: 5px;
        }
    </style>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>
<body>
<span style="background-image: url('../img/tubiao.png');background-position: 0px 20px; width: 20px;height: 20px; margin-left: 10px; ">　 </span>
<span>背景不作文字描述，直接采用效果与代码示例</span>
<br/>
<br/>
<br/>
<b>　背景样式属性</b>
<div style="width: 500px">
<ul>
    <li style="margin-left:30px;"><span class="gr">background-color：</span>背景色</li>
    <li style="margin-left:30px;"><span class="gr">background-image:url(路径)：</span>背景图片</li>
    <li style="margin-left:30px;"><span class="gr">background-size：100% 100%</span>图片的拉伸</li>
    <br/>
    <li style="margin-left:30px;"><span class="gr">background-position：0px 0px</span>图片放的位置 (还可以用%表示数值)
    <ul>
        <li style="margin-left: 20px;">background-position:center：图片水平居中</li>
        <li style="margin-left: 20px;">background-position: right top：图片右上</li>
        <li style="margin-left: 20px;">background-position:bottom：图片居下</li>
        <li style="margin-left: 20px;">background-position：0px 0px还是调节图片坐标原点的偏移量</li>
    </ul>
    </li>
    <br/>
    <li style="margin-left:30px;"><span class="gr">backgroud-repeat：repeat</span>默认图片平铺
    <ul>
        <li style="margin-left: 20px;">backgroud-repeat:no-repeat：图片只出现一次(不平铺)</li>
        <li style="margin-left: 20px;">backgroud-repeat:repeat-x：水平平铺</li>
        <li style="margin-left: 20px;">backgroud-repeat:repeat-y：垂直平铺</li>
        <li style="margin-left: 20px;">background-attachment: fixed：固定图片(默认值图片会动)</li>
        <li>当background-position:50px 50px;的时候，要加上background-attachment: fixed才能使图片居中</li>
    </ul></li>
</ul>
    <br/>
    <b>　背景图片代码示例</b>
<pre>    &lt;style type="text/css"&gt;
        * {
            margin-left: 5px;
            margin-top: 5px;
    <span class="gr">background-image: url("../img/beijin4.jpg");</span>}
    &lt;/style&gt;</pre>
    <br/>
    <b>　小图标代码示例</b>
    <pre>&lt;span <span class="gr">style="background-image: url('../img/tubiao.png');background-position: 0px 20px; width: 20px;height: 20px;"</span>&gt;　 &lt;/span&gt;</pre>
</div>
<br/>
</body>
</html>